<template>
	<view class="body">
		<xk-header title="车辆预约详情"></xk-header>
		<view class="util-bar">
			<view class="estate-box">
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">申请单号：{{info.apply_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">用车人:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_car_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">用车部门:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_car_dept}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">用车人电话:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_phone}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">乘车人数:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_num}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">用车性质:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_car_type==10?'出差':'客户接待'}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">开始时间:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_start_time}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">结束时间:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_end_time}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">是否需要司机:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_isdriver==1?'是':'否'}}</view></u-col>
				</u-row>

				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">出发地:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_start_address}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">目的地:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_end_address}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">状态:</view></u-col>
					<u-col span="7">
						<view v-if="info.reserve_status==10" class="color-text-1">已提交</view>
						<view v-else-if="info.reserve_status==20" class="color-text-1">待受理</view>
						<view v-else-if="info.reserve_status==30" class="color-text-1">受理不通过</view>
						<view v-else-if="info.reserve_status==40" class="color-text-1">待领用</view>
						<view v-else-if="info.reserve_status==50" class="color-text-1">待归还</view>
						<view v-else-if="info.reserve_status==60" class="color-text-1">待异常处理</view>
						<view v-else-if="info.reserve_status==70" class="color-text-1">已完成</view>
						<view v-else-if="info.reserve_status==80" class="color-text-1">已完成[超时]</view>
						<view v-else-if="info.reserve_status==90" class="color-text-1">已完成[异常处理]</view>
						<view v-else-if="info.reserve_status==100" class="color-text-1">审批中</view>
						<view v-else-if="info.reserve_status==110" class="color-text-1">审批不通过</view>
						<view v-else class="color-text-4">异常</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">用车事由:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_car_content}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">备注:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_remark}}</view></u-col>
				</u-row>

			</view>

			<view class="rowlist-box">
				<view class="list-item-header" @click="more1 = !more1">
					<u-row>
						<u-col span="11"><view class="text-left-box">申请信息</view></u-col>
						<u-col span="1">
							<view class="text-right-box">
							<u-icon v-if="!more1" name="arrow-up" color="#999" size="20"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="20"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="data-item" v-if="more1">
					<u-row customStyle="margin-top:10px;margin-bottom:10px;">
						<u-col span="4"><text class="grey-text">申请人：</text></u-col>
						<u-col span="8">{{info.apply_user_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">申请人部门：</text></u-col>
						<u-col span="8">{{info.apply_dept_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">申请日期：</text></u-col>
						<u-col span="8">{{info.apply_date}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">受理结果：</text></u-col>
						<u-col span="8">{{info.receiver_results==10?'同意':'不同意'}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">受理意见：</text></u-col>
						<u-col span="8">{{info.receiver_content}}</u-col>
					</u-row>
				</view>
			</view>

			<view class="rowlist-box">
				<view class="list-item-header" @click="more2 = !more2">
					<u-row>
						<u-col span="11"><view class="text-left-box">安排车辆信息</view></u-col>
						<u-col span="1">
							<view class="text-right-box">
							<u-icon v-if="!more2" name="arrow-up" color="#999" size="20"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="20"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="data-item" v-if="more2">
					<u-row customStyle="margin-top:10px;margin-bottom:10px;">
						<u-col span="4"><text class="grey-text">安排车辆编码：</text></u-col>
						<u-col span="8">{{info.vehicle_no}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">车辆名称：</text></u-col>
						<u-col span="8">{{info.vehicle_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">车牌号：</text></u-col>
						<u-col span="8">{{info.vehicle_number}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">规格型号：</text></u-col>
						<u-col span="8">{{info.vehicle_model}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">司机：</text></u-col>
						<u-col span="8">{{info.receiver_dirver}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">备注：</text></u-col>
						<u-col span="8">{{info.receiver_remark}}</u-col>
					</u-row>
				</view>
			</view>

			<view class="rowlist-box">
				<view class="list-item-header" @click="more3 = !more3">
					<u-row>
						<u-col span="11"><view class="text-left-box">受理信息</view></u-col>
						<u-col span="1">
							<view class="text-right-box">
							<u-icon v-if="!more3" name="arrow-up" color="#999" size="20"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="20"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="data-item" v-if="more3">
					<u-row customStyle="margin-top:10px;margin-bottom:10px;">
						<u-col span="4"><text class="grey-text">受理人：</text></u-col>
						<u-col span="8">{{info.receiver_user_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">受理部门：</text></u-col>
						<u-col span="8">{{info.receiver_dept_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">受理日期：</text></u-col>
						<u-col span="8">{{info.receiver_date}}</u-col>
					</u-row>
				</view>
			</view>

			<view class="rowlist-box">
				<view class="list-item-header" @click="more4 = !more4">
					<u-row>
						<u-col span="11"><view class="text-left-box">领用信息</view></u-col>
						<u-col span="1">
							<view class="text-right-box">
							<u-icon v-if="!more4" name="arrow-up" color="#999" size="20"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="20"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="data-item" v-if="more4">
					<u-row customStyle="margin-top:10px;margin-bottom:10px;">
						<u-col span="4"><text class="grey-text">领用时间：</text></u-col>
						<u-col span="8">{{info.requisi_time}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">领用描述：</text></u-col>
						<u-col span="8">{{info.requisi_content}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">领用人：</text></u-col>
						<u-col span="8">{{info.requisi_user_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">领用部门：</text></u-col>
						<u-col span="8">{{info.requisi_dept_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">受理日期：</text></u-col>
						<u-col span="8">{{info.receiver_date}}</u-col>
					</u-row>
				</view>
			</view>

			<view class="rowlist-box">
				<view class="list-item-header" @click="more5 = !more5">
					<u-row>
						<u-col span="11"><view class="text-left-box">归还信息</view></u-col>
						<u-col span="1">
							<view class="text-right-box">
							<u-icon v-if="!more5" name="arrow-up" color="#999" size="20"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="20"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="data-item" v-if="more5">
					<u-row customStyle="margin-top:10px;margin-bottom:10px;">
						<u-col span="4"><text class="grey-text">归还人：</text></u-col>
						<u-col span="8">{{info.return_user_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">归还部门：</text></u-col>
						<u-col span="8">{{info.return_dept_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">归还日期：</text></u-col>
						<u-col span="8">{{info.return_date}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">备注：</text></u-col>
						<u-col span="8">{{info.return_remark}}</u-col>
					</u-row>

				</view>
			</view>

			<view class="rowlist-box">
				<view class="list-item-header" @click="more6 = !more6">
					<u-row>
						<u-col span="11"><view class="text-left-box">维修信息</view></u-col>
						<u-col span="1">
							<view class="text-right-box">
							<u-icon v-if="!more6" name="arrow-up" color="#999" size="20"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="20"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="data-item" v-if="more6">
					<u-row customStyle="margin-top:10px;margin-bottom:10px;">
						<u-col span="4"><text class="grey-text">费用支付方：</text></u-col>
						<u-col span="8">{{info.pay_user_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">维修总费用(元)：</text></u-col>
						<u-col span="8">{{info.repair_money}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">维修负责人：</text></u-col>
						<u-col span="8">{{info.repair_user_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">维修记录：</text></u-col>
						<u-col span="8">{{info.repair_content}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">备注：</text></u-col>
						<u-col span="8">{{info.repair_remark}}</u-col>
					</u-row>
				</view>
			</view>

			<view class="rowlist-box">
				<view class="list-item-header" @click="more7 = !more7">
					<u-row>
						<u-col span="11"><view class="text-left-box">记录信息</view></u-col>
						<u-col span="1">
							<view class="text-right-box">
							<u-icon v-if="!more7" name="arrow-up" color="#999" size="20"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="20"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="data-item" v-if="more7">
					<u-row customStyle="margin-top:10px;margin-bottom:10px;">
						<u-col span="4"><text class="grey-text">记录人：</text></u-col>
						<u-col span="8">{{info.record_user_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">记录部门：</text></u-col>
						<u-col span="8">{{info.record_dept_name}}</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4"><text class="grey-text">记录日期：</text></u-col>
						<u-col span="8">{{info.record_date}}</u-col>
					</u-row>
				</view>
			</view>

		</view>
		<u-loading-page loading-mode="spinner" :loading="loadingText" loadingText="数据加载中" fontSize="16"></u-loading-page>
		<view class="common-bottom-view-bottom" v-if="info.reserve_status==10">
			<u-row>
				<u-col span="6"><view class="common-btn" @click="back">返回</view></u-col>
				<u-col span="6"><view class="common-btn-edit" @click="editInfo(info.car_reserve_id)">修改</view></u-col>
			</u-row>
		</view>
		<view class="common-bottom-view-bottom" v-else>
			<u-row>
				<u-col span="12"><view class="common-btn" @click="back">返回</view></u-col>
			</u-row>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				car_reserve_id:'',
				triggered:false,
				loadingText:false,
				info:[],
				more1:false,
				more2:false,
				more3:false,
				more4:false,
				more5:false,
				more6:false,
				more7:false,
			}
		},
		onShow(){

		},
		onLoad(opts){
			if(opts.car_reserve_id){
				this.car_reserve_id=opts.car_reserve_id
				this.queryListInfo(true)
			}
		},
		methods: {
            back(){
            	uni.navigateBack()
            },
			editInfo(id){
				uni.navigateTo({
					url: '/pagesB/vehicle-info/vehicle-info-edit?car_reserve_id='+id
				})
			},
			pullDownRefresh(){
				if(this.triggered){
					return;
				}
				this.triggered = true;
				this.queryListInfo(true)
			},
			stopRefresh(){
				setTimeout(()=>{
					this.triggered = false;
					console.log('stop')
				}, 500)
			},

			async queryListInfo(flag) {
				this.loadingText=true;
				this.$api.get_poCarReserve_getCarReserveDetail(this.car_reserve_id).then((res)=>{
					console.log(res)
					this.info=res.poCarReserve_getCarReserve;
					this.loadingText=false;
				});
				this.stopRefresh();
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 10px 10px;
	margin:10px;
	border-radius:6px;
	font-size:28rpx;
}
.danhao-text{
	font-size:32rpx;
	font-weight:bold;
}
.grey-text{
	color:#999999;
}
.black-text{
	padding-left:5px;
}
.color-text-1{
	padding-left:5px;
	color:#59A0FF;
}
.color-text-2{
	padding-left:5px;
	color:#0660FF;
}
.color-text-3{
	padding-left:5px;
	color:#000000;
}
.color-text-4{
	padding-left:5px;
	color:#ff0000;
}
.common-bottom-view-bottom{
	position: fixed;
	width:100%;
	padding:0px;
	background-color:#ffffff;
	bottom:0;
	left:0;
}
.common-btn-edit{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	background-image: linear-gradient(-45deg, #8c95a1 0%, #0acecd 100%);
	height: 88rpx;
	border-radius: 44rpx;
	margin: 40rpx 32rpx;
	font-size: 32rpx;
	.btn-icon{
		width: 48rpx;
		height: 48rpx;
		margin-right: 10rpx;
	}
}
.rowlist-box{
	margin:10px;
	padding:10px;
	border-radius:10px;
	background-color:#ffffff;
}
.text-left-box{
	font-size:18px;
	font-weight:bold;
}
.text-right-box{
	font-size:18px;
	text-align:right;
}
</style>
